<template>
    <div class="version-info-wrap" style="overflow-y: auto">
        <h-section collapse>
            <template #title>
                <span>基本信息</span>
                <span class="error-color margin-l-8">{{ detail.disableMessage }}</span>
            </template>
            <template #titleExtra v-if="detail.id && versionInfo.id && !disabled && versionInfo.type !== '4'">
                <flexbox justify="flex-end" align="center" style="font-size: 14px" @click.stop="">
                    <!-- 非子产品 -->
                    <div v-if="systemDetail.catalogType < 2">
                        <!-- 预发布版本都可以编辑 -->
                        <a-button type="primary" @click.stop="handleEdit" v-if="versionInfo.type === '3'"> 编辑 </a-button>
                        <!-- 别的类型看是否有错误信息 -->
                        <a-button type="primary" @click.stop="handleEdit" :disabled="!!detail.disableMessage" v-else>编辑</a-button>
                    </div>
                    <!-- 子产品 -->
                    <div v-else>
                        <!-- 子产品的只能编辑预发布版本 -->
                        <a-button type="primary" @click.stop="handleEdit" v-if="versionInfo.type === '3'"> 编辑 </a-button>
                    </div>
                    <div v-if="+detail.versionStatus <= 1">
                        <a-button
                            type="primary"
                            danger
                            @click.stop="handleDelete"
                            class="margin-l-8"
                            v-if="versionInfo.type === '3' || systemDetail.catalogType < 2"
                        >
                            删除
                        </a-button>
                    </div>
                </flexbox>
            </template>
            <a-form layout="inline">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="PBI目录">
                            {{ systemInfo.catalogName }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="版本号">
                            <span v-if="detail.versionNumber">
                                {{ detail.versionNumber.slice(0, 1).toLowerCase() !== 'v' ? `V${detail.versionNumber}` : detail.versionNumber }}
                            </span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="类型">
                            {{ $filters.versionControlVersionTypeFilter(detail.type) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="开发状态">
                            {{ $filters.versionControlVersionStatusFilter(detail.status, detail.type) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="8" v-if="detail.type === '1'">
                        <a-form-item label="服务状态">
                            {{ $filters.versionServiceStatusFilter(detail.serviceStatus) }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="开始时间">
                            {{ detail.startTime }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-item label="结束时间">
                            {{ detail.onlineTime }}
                        </a-form-item>
                    </a-col>
                    <a-col :span="18">
                        <a-form-item label="版本描述">
                            {{ detail.description }}
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </h-section>
        <h-section title="关联年度计划" collapse :defaultOpen="false"> </h-section>
        <h-section title="关联项目" collapse :defaultOpen="false"> </h-section>
        <h-section title="关联OKR" collapse :defaultOpen="false"> </h-section>

        <CreateVersionModal ref="createModalRef" @success="handleSuccess" />

        <a-modal class="deleteVersionWrap" :width="410" v-model:visible="deleteVersionVisible" :title="null" :closable="false">
            <flexbox style="font-weight: 500; font-size: 16px">
                <CloseCircleFilled class="modal-icon-error" style="margin-right: 16px; font-size: 22px" />
                <span>确认删除【{{ detail.versionNumber }}】数据？</span>
            </flexbox>
            <template #footer>
                <flexbox justify="flex-end">
                    <a-button @click="deleteVersionVisible = false">取消</a-button>
                    <a-button @click="handleConfirmDelete(1)">仅删除版本号</a-button>
                    <a-button @click="handleConfirmDelete(2)" v-if="detail.versionStatus === '1'">删除版本号及流程</a-button>
                </flexbox>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import CreateVersionModal from './CreateVersionModal.vue';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import api from '@/api';
import { defineComponent, ref, unref, reactive, toRefs, watch } from 'vue';
interface State {
    detail: any;
    deleteVersionVisible: boolean;
}
export default defineComponent({
    components: {
        CreateVersionModal,
        CloseCircleFilled
    },
    props: {
        versionInfo: {
            type: Object,
            default: () => ({})
        },
        systemInfo: {
            type: Object,
            default: () => ({})
        },
        proSystemInfo: {
            type: Object,
            default: () => ({})
        },
        systemDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const createModalRef = ref<any>();
        const state = reactive<State>({
            detail: {},
            deleteVersionVisible: false
        });
        const getDetail = async () => {
            if (props.versionInfo.id) {
                const query = {
                    id: props.versionInfo.id
                };
                const { success, moule } = await api.versionControlModel.findById(query);
                if (success) {
                    state.detail = {
                        ...moule
                    };
                }
            } else {
                state.detail = {};
            }
        };
        // 删除
        const handleDelete = () => {
            state.deleteVersionVisible = true;
        };
        const handleConfirmDelete = async (type) => {
            if (type === 1) {
                const query = {
                    id: state.detail.id
                };
                const { success, errorMsg } = await api.versionControlModel.delete(query);
                if (success) {
                    message.success('删除成功');
                    emit('success', 'delete');
                } else {
                    message.error(errorMsg);
                }
                state.deleteVersionVisible = false;
            } else {
                const query = {
                    id: state.detail.id
                };
                const { success } = await api.versionControlModel.delete(query);
                if (success) {
                    const { success, errorMsg } = await api.versionModel.deleteById({
                        id: state.detail.versionIds
                    });
                    if (success) {
                        message.success('删除成功');
                        emit('success', 'delete');
                    } else {
                        message.error(errorMsg);
                    }
                    state.deleteVersionVisible = false;
                }
            }
        };
        const handleEdit = () => {
            unref(createModalRef).open({
                systemInfo: props.systemInfo,
                proSystemInfo: props.proSystemInfo,
                versionInfo: state.detail,
                isUnifyRelease: props.systemDetail.isUnifyRelease === '1' ? true : false
            });
        };
        const handleSuccess = () => {
            getDetail();
            emit('success', 'edit');
        };
        watch(
            () => props.versionInfo,
            () => {
                getDetail();
            }
        );
        return {
            createModalRef,
            ...toRefs(state),
            handleEdit,
            handleDelete,
            getDetail,
            handleSuccess,
            handleConfirmDelete
        };
    }
});
</script>
<style lang="less">
.deleteVersionWrap {
    .ant-modal-footer {
        border-top: none !important;
    }
}
</style>
<style scoped lang="less">
::v-deep(.section-wrap) {
    padding: 0 !important;
}
::v-deep(.ant-collapse-header) {
    height: 56px !important;
}
</style>
